@charset "UTF-8";

$component-name: 'ui-btn';

/**
	基础组件 按钮
	
	对于按钮组件我们将其大小分为 4个规格
	1. large 较大
	2. default 默认
	3. small 较小
	4. mini mini模式


	1. large按钮
	其高度 height 为


*/

// 按钮的高度
$btn-height-large: 100upx;
$btn-height-base: 88upx;
$btn-height-small: 60upx;
$btn-height-mini: 44upx;

$btn-font-size-large: $font-size-large;
$btn-font-size-base: $font-size-base;
$btn-font-size-small: $font-size-small;
$btn-font-size-mini: $font-size-small;

$btn-border-radius-base: $border-radius-base;

.#{$component-name} {
	position: relative;
	border: 0 !important;
	border-radius: 0upx;

	display: inline-flex;
	align-items: center;
	justify-content: center;

	height: $btn-height-base;
	width: 100%;
	padding: 0;
	font-size: $btn-font-size-base;
	line-height: $btn-height-base;
	text-align: center;
	vertical-align: middle;
	// transition: opacity @animation-duration-fast;

	-webkit-appearance: none;
	-webkit-text-size-adjust: 100%;
	background-color: #fff;

	&::after {
		content: '';
		position: absolute;
		width: 200%;
		height: 200%;
		-webkit-transform-origin: 0 0;
		transform-origin: 0 0;
		-webkit-transform: scale(0.5, 0.5);
		transform: scale(0.5, 0.5);
		-webkit-box-sizing: border-box;
		box-sizing: border-box;
		left: 0;
		top: 0;
		border-radius: 0rpx;
		border: 1upx solid $border-color-base;
	}

	/* color start*/
	&.is-primary {
		background: $brand-primary;
		background-color: $brand-primary;
		color: $color-text-base-inverse;

		&::after {
			border-color: $brand-primary;
		}
	}
	&.is-success {
		background: $brand-success;
		color: $color-text-base-inverse;
		&::after {
			border-color: $brand-success;
		}
	}
	// 信息按钮
	&.is-info {
		background: $brand-info;
		background-color: $brand-info;
		color: $color-text-base-inverse;
		&::after {
			border-color: $brand-info;
		}
	}
	&.is-warning {
		background: $brand-warning;
		background-color: $brand-warning;
		color: $color-text-base-inverse;
		&::after {
			border-color: $brand-warning;
		}
	}
	&.is-danger {
		background: $brand-danger;
		color: $color-text-base-inverse;
		&::after {
			border-color: $brand-danger;
		}
	}
	// -----------------------------------
	// --- 按钮的大小
	// ----------------------------------
	&.is-large {
		height: $btn-height-large;
		line-height: $btn-height-large;
		font-size: $font-size-large;
	}
	&.is-small {
		height: $btn-height-small;
		line-height: $btn-height-small;
		font-size: $font-size-small;
	}
	&.is-mini {
		height: $btn-height-mini;
		line-height: $btn-height-mini;
		font-size: $font-size-small;
	}

	// 幽灵按钮
	&.is-ghost {
		background: $brand-warning;
		color: rgb(109, 95, 95);
	}

	&.is-inline {
		width: auto;
		padding-left: 24upx;
		padding-right: 24upx;
	}

	&.is-square {
		border-radius: $btn-border-radius-base;
		&::after {
			border-radius: $btn-border-radius-base;
		}
	}
	&.is-circle {
		border-radius: 100upx;
		&::after {
			border-radius: 100upx;
		}
	}

	&.is-active::after {
		opacity: 0.15;
	}

	&.is-plain {
		&.is-primary {
			background: $fill-base;
			color: $brand-primary;
			.ui-btn--icon {
				color: $brand-primary;
			}
			&::after {
				border-color: $brand-primary;
			}
		}
		&.is-info {
			background: $fill-base;
			color: $brand-info;
			&::after {
				border-color: $brand-info;
			}
		}
		&.is-warning {
			background: $fill-base;
			color: $brand-warning;
			&::after {
				border-color: $brand-warning;
			}
		}
		&.is-success {
			background: $fill-base;
			color: $brand-success;
			&::after {
				border-color: $brand-success;
			}
		}
		&.is-danger {
			background: $fill-base;
			color: $brand-danger;
			&::after {
				border-color: $brand-danger;
			}
		}
	}
	// 文本按钮
	&.is-text {
		background: transparent;
		&::after {
			border-color: transparent;
		}

		&.is-primary {
			background: transparent;
			color: $brand-primary;
			.ui-btn--icon {
				color: $brand-primary;
			}
			&::after {
				border-color: transparent;
			}
		}
		&.is-info {
			background: transparent;
			color: $brand-info;
			&::after {
				border-color: transparent;
			}
		}
		&.is-warning {
			background: transparent;
			color: $brand-warning;
			&::after {
				border-color: transparent;
			}
		}
		&.is-danger {
			background: transparent;
			color: $brand-danger;
			&::after {
				border-color: transparent;
			}
		}
	}
	// 下面是几个状态
	// disabled
	&.is-disabled,
	&[button].is-disabled {
		color: $color-text-disabled;
		opacity: $opacity-disabled;
		cursor: not-allowed;

		&.is-primary,
		&.is-warning,
		&.is-info,
		&.is-danger {
			color: #fff;
		}

		&.is-primary.is-plain,
		&.is-warning.is-plain,
		&.is-info.is-plain,
		&.is-danger.is-plain {
			color: $color-text-disabled;
		}
		&.is-primary.is-text {
			color: $brand-primary;
		}
		&.is-warning.is-text {
			color: $brand-warning;
		}
		&.is-info.is-text {
			color: $brand-info;
		}
		&.is-danger.is-text {
			color: $brand-danger;
		}
	}
	.ui-icon {
		margin-right: 8upx;
		vertical-align: middle;
	}

	&.is-loading {
		&::before {
			display: none;
		}
		.ui-btn--loading-text {
			display: inline-block;
			margin-left: 8upx;
		}
	}
}

.ui-button-group {
	.ui-btn {
		width: auto !important;
		padding-left: 24upx;
		padding-right: 24upx;

		&::after {
			border-radius: 0;
		}
		&:first-child::after {
			border-top-left-radius: $btn-border-radius-base;
			border-bottom-left-radius: $btn-border-radius-base;
		}
		&:last-child {
			border-top-right-radius: $btn-border-radius-base;
			border-bottom-right-radius: $btn-border-radius-base;
			&::after {
				border-top-right-radius: $btn-border-radius-base;
				border-bottom-right-radius: $btn-border-radius-base;
			}
		}
	}
}

// TODO: 怎么设置两个组件间的样式 如 btn + btn
.#{$component-name} + .#{$component-name} {
	margin-left: 20upx;
}
